<template>
  <div class="home">
    <aside class="aside_show" v-if="isFold">
      <ul class="nav">
        <li @click="isActive = 1">
          <span class="title" @click="showMatch" :class="{ isActive: isActive == 1 }">
            <i class="iconfont icon-ios-tennisball"></i>
            赛事管理
            <i class="iconfont icon-right" :class="{ rotate: isMatch }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isMatchShowAdd"
          >
            <li @click="toMatchList">赛事列表</li>
            <li @click="toAddMatch" v-if="showAdd">添加赛事</li>
          </ul>
        </li>
        <li @click="isActive = 3" v-if="user_type == 5">
          <span class="title" :class="{ isActive: isActive == 3 }" @click="showUserManagement">
            <i class="iconfont icon-peoplefill"></i>
            用户管理
            <i class="iconfont icon-right" :class="{ rotate: isUser }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isUserShowAdd"
          >
            <li @click="playerList" v-if="showAdd">运动员列表</li>
            <li @click="toUmpireList" v-if="showAdd">
              <el-badge :value="badge" class="badgeItem">
                <el-button size="small">裁判员列表</el-button>
              </el-badge>
            </li>
            <li @click="toOrganizationList" v-if="showAdd">机构列表</li>
          </ul>
        </li>
        <li @click="isActive = 4" v-if="user_type == 5">
          <span class="title" :class="{ isActive: isActive == 4 }" @click="showPowerManagement">
            <i class="iconfont icon-permissions-user"></i>
            权限管理
            <i class="iconfont icon-right" :class="{ rotate: isPower }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isPowerShowAdd"
          >
            <li @click="toPower" v-if="showAdd">权限列表</li>
            <li @click="toKeyWord" v-if="showAdd">关键词列表</li>
						<li @click="toLogList" v-if="showAdd">日志查看</li>
						<li @click="toMatchLog" v-if="showAdd">赛事操作日志</li>
          </ul>
        </li>
        <li @click="isActive = 5" v-if="user_type == 5">
          <span class="title" :class="{ isActive: isActive == 5 }" @click="showOrderManagement">
            <i style="font-size: 18px;margin: 0 5px;" class="el-icon-document"></i>
            订单管理
            <i class="iconfont icon-right" :class="{ rotate: isOrder }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isOrderShowAdd"
          >
            <li @click="toOrder" v-if="showAdd">订单列表</li>
          </ul>
        </li>
        <li @click="isActive = 6" v-if="user_type == 5">
          <span class="title" :class="{ isActive: isActive == 6 }" @click="isQuest = !isQuest">
            <i style="font-size: 18px;margin: 0 5px;" class="el-icon-edit-outline"></i>
            题库管理
            <i class="iconfont icon-right" :class="{ rotate: isQuest }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isQuestShowAdd"
          >
            <li @click="toKnowledge" v-if="showAdd">知识点列表</li>
            <li @click="toTest" v-if="showAdd">试题列表</li>
          </ul>
        </li>
				<!-- 2020-11-23撤销"机构报名"权限控制  v-if="user_type == 5 || user_type == 2 || user_type == 3" -->
         <li @click="isActive = 7" v-if="user_type >= 1">
          <span class="title" :class="{ isActive: isActive == 7 }" @click="isSign = !isSign">
            <i style="font-size: 18px;margin: 0 5px;" class="el-icon-circle-plus"></i>
            机构报名
            <i class="iconfont icon-right" :class="{ rotate: isQuest }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isSignUp"
          >
            <li @click="toGroupRegist" v-if="user_type >= 1">机构报名</li>
            <!-- <li @click="toGroupRegist" v-if="showAdd">机构报名</li> -->
            <!-- <li @click="toGroup" v-if="showAdd">赛事组别</li> -->
          </ul>
        </li>
         <!-- <li @click="isActive = 8" v-if="user_type == 2">
          <span class="title" :class="{ isActive: isActive == 8 }" @click="isClubShow = !isClubShow">
            <i style="font-size: 18px;margin: 0 5px;" class="el-icon-circle-plus"></i>
            我的机构
            <i class="iconfont icon-right" :class="{ rotate: isQuest }"></i>
          </span>
          <ul
            style="height:0;transition:.5s;overflow:hidden"
            class="noMatch"
            :class="isClubShowUp"
          >
            <li @click="changeClubInfo" v-if="showAdd">我的机构</li>
          </ul>
        </li> -->


      </ul>
    </aside>
    <aside class="aside_hide" v-else="isFold">
      <ul class="nav">
        <el-tooltip class="item" effect="dark" content="赛事管理" placement="right">
          <li @click="openAside(1)" :class="{ isActive: isActive == 1 }">
            <i class="iconfont icon-ios-tennisball"></i>
          </li>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="用户管理"
          placement="right"
          v-if="userType == 5"
        >
          <li @click="openAside(3)" :class="{ isActive: isActive == 3 }">
            <i class="iconfont icon-peoplefill"></i>
          </li>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="权限管理"
          placement="right"
          v-if="userType == 5"
        >
          <li @click="openAside(4)" :class="{ isActive: isActive == 4 }">
            <i class="iconfont icon-permissions-user"></i>
          </li>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="订单管理"
          placement="right"
          v-if="userType == 5"
        >
          <li @click="openAside(5)" :class="{ isActive: isActive == 5 }">
            <i style="font-size: 18px;" class="el-icon-document"></i>
          </li>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="题库管理"
          placement="right"
          v-if="userType == 5"
        >
          <li @click="openAside(6)" :class="{ isActive: isActive == 6 }">
            <i style="font-size: 18px;" class="el-icon-edit-outline"></i>
          </li>
        </el-tooltip>

         <el-tooltip
          class="item"
          effect="dark"
          content="机构报名"
          placement="right"
          v-if="userType >= 1"
        >
          <li @click="openAside(7)" :class="{ isActive: isActive == 7 }">
            <i style="font-size: 18px;" class="el-icon-circle-plus"></i>
          </li>
        </el-tooltip>
      </ul>
    </aside>
    <div class="body">
      <header>
        <div class="left">
          <i class="iconfont icon-caidan" @click="fold"></i>
          <span class="title">
            <b>TISSYS网球智能服务系统</b>
            <a
              href="https://www.kancloud.cn/mclanglang/php/1069553"
              class="operation_instructions"
              target="_blank"
            >操作说明</a>
          </span>
        </div>
        <div class="right">
          <el-menu class="el-menu-demo" mode="horizontal" id="customSubmenu">
            <el-menu-item index="1" style="height: 40px;line-height: 40px;padding-right: 5px;">
              <i class="iconfont icon-peoplefill"></i>
              <span class="user">用户名：{{ userName }}</span>
            </el-menu-item>
            <el-menu-item index="2" style="padding: 0;height: 40px;line-height: 40px;">
              <span class="liner">|</span>
            </el-menu-item>
            <el-menu-item index="3" style="height: 40px;line-height: 40px;padding: 0 5px;">
              <span class="identify">{{ userType | User_Type }}</span>
            </el-menu-item>
            <el-menu-item index="4" style="padding: 0;height: 40px;line-height: 40px;">
              <span class="liner">|</span>
            </el-menu-item>
            <el-submenu index="5" style="height: 40px;line-height: 40px;padding: 0 5px;">
              <template slot="title">
                <span>操作</span>
              </template>
              <el-menu-item
                index="5-1"
                @click="centerDialogVisible = true"
                style="cursor: pointer;"
              >
                <span>修改密码</span>
              </el-menu-item>
              <el-menu-item v-if="user_club_type==2"
                index="5-3"
                @click="changeClubInfo"
                style="cursor: pointer;"
              >
                <span>机构信息</span>
              </el-menu-item>
              <el-menu-item index="5-2" @click="doLogout" style="cursor: pointer;">
                <span class="outlogin">退出</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </header>
      <el-dialog title="修改密码" :visible.sync="centerDialogVisible" width="30%" center>
        <div style="width:73%;margin: 0 auto;">
          <div
            class="demo-input-suffix"
            style="display: flex;align-items: center;margin-bottom: 10px;"
          >
            <span style="display: inline-block;text-align: right;width: 30%;">原密码：</span>
            <el-input
              size="medium"
              placeholder="请输入原密码"
              v-model.trim="primaryPassword"
              clearable
              style="width:70%;"
            ></el-input>
          </div>
          <div
            class="demo-input-suffix"
            style="display: flex;align-items: center;margin-bottom: 10px;position: relative;"
          >
            <span style="display: inline-block;text-align: right;width: 30%;">新密码：</span>
            <el-input
              type="password"
              size="medium"
              placeholder="请输入新密码"
              v-model.trim="newPassword"
              clearable
              style="width:70%;"
            ></el-input>
            <el-tooltip placement="top" style="position: absolute;right: -24px;">
              <div slot="content">密码必须大于5位，为确保安全请使用复杂密码</div>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="demo-input-suffix" style="display: flex;align-items: center;">
            <span style="display: inline-block;text-align: right;width: 30%;">确认新密码：</span>
            <el-input
              type="password"
              size="medium"
              placeholder="确认与新密码一致"
              v-model.trim="confirmPassword"
              clearable
              style="width:70%;"
            ></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="modifyPassword">确 定</el-button>
        </span>
      </el-dialog>
      <transition name="slide-in">
        <div class="guide" v-show="showTimeLine">
          <div style="display: flex;margin: auto;position: relative;">
            <div
              v-for="(progress, progressIndex) in TimeLineArr"
              :key="progressIndex"
              style="position: relative;"
            >
              <el-dropdown
                @command="handleCommand"
                size="medium"
                placement="bottom-start"
                v-if="TimeLine_active[progressIndex]"
              >
                <div
                  style="padding-left: 38px;width: 100px;height: 50px;line-height: 40px;display: flex;box-sizing: border-box;position: relative;z-index: 10;"
                >
                  <i :class="timeLine_point(progressIndex)" style="font-size: 24px;"></i>
                  <i
                    v-if="progressIndex < TimeLineArr.length - 1"
                    :class="timeLine_line(progressIndex)"
                    style="font-size: 110px;margin-left: -28%;"
                  ></i>
                </div>
                <div style="text-align: center;position: absolute;left: 20px;top: 28px;z-index: 1;">
                  <span
                    :class="'step' + (progressIndex + 1) + '-color'"
                  >{{ TimeLineProgress[progressIndex] }}</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(step, stepIndex) in progress"
                    :key="stepIndex"
                    :disabled="!step.status"
                    :command="{ step: step, stepIndex: stepIndex, progressIndex: progressIndex }"
                  >{{ step.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div v-else style="text-align: center;">
                <div
                  style="padding-left: 38px;width: 100px;height: 50px;line-height: 40px;display: flex;box-sizing: border-box;position: relative;z-index: 10;"
                >
                  <i :class="timeLine_point(progressIndex)" style="font-size: 24px;"></i>
                  <i
                    v-if="progressIndex < TimeLineArr.length - 1"
                    :class="timeLine_line(progressIndex)"
                    style="font-size: 110px;margin-left: -28%;"
                  ></i>
                </div>
                <div style="text-align: center;position: absolute;left: 20px;top: 28px;z-index: 1;">
                  <span
                    :class="'step' + (progressIndex + 1) + '-color'"
                  >{{ TimeLineProgress[progressIndex] }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <div class="main" :class="{ setMain: canMain }">
        <el-scrollbar style="height:100%" v-if="pathCheck">
          <router-view id="my-scrollbar" :key="match_id"></router-view>
        </el-scrollbar>
        <div v-else>
          <router-view :key="match_id"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isFold: false,
      isMatch: false,
      isUser: false,
      isPower: false,
      isOrder: false,
      isQuest: false,
      isSign:false,
      isClubShow:false,
      isActive: "",
      myBarOption: {
        barColor: "red"
      },
      user_club_type:window.sessionStorage.getItem("user_type"),
      myClub:[],
      username: "",
      user_type: "",
      transitionName: "slide-right",
      showTimeLine: false,
      TimeLineProgress: [
        "赛事信息",
        "报名签到",
        "竞赛抽签",
        "场次排序",
        "成绩管理"
      ],
      badge: null,
      centerDialogVisible: false,
      primaryPassword: "",
      newPassword: "",
      confirmPassword: "",
      canMain: true
    };
  },
  filters: {
    User_Type(val) {
      //0普通用户，1裁判，2机构，3既是裁判也是机构
      if (val < 0 || val > 5 || val == 4) {
        return "暂无身份";
      } else {
        if (val == 0) {
          return "用户";
        }
        if (val == 1) {
          return "裁判";
        }
        if (val == 2) {
          return "机构";
        }
        if (val == 3) {
          return "裁判机构";
        }
        if (val == 5) {
          return "管理员";
        }
      }
    }
  },
  watch: {
    $route(to, from) {
      this.getTimeLine();
      if (
        this.$route.path == "/Index/Match/" ||
        this.$route.path == "/index/Match" ||
        this.$route.path == "/Index/Match/AddNewMatch" ||
        this.$route.path.indexOf("orderMange") > 0 ||
        this.$route.path.indexOf("User") > 0 ||
        this.$route.path.indexOf("questionMange") > 0 ||
        this.$route.path.indexOf("power") > 0
      ) {
        this.canMain = true;
      } else {
        this.canMain = false;
      }
      if (!this.badge && this.badge != 0) {
        this.get_allclub();
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (
        to.path == "/Index/Match/" ||
        to.path == "/index/Match" ||
        to.path == "/Index/Match/AddNewMatch" ||
        to.path.indexOf("orderMange") > 0 ||
        to.path.indexOf("User") > 0 ||
        to.path.indexOf("questionMange") > 0 ||
        to.path.indexOf("power") > 0
      ) {
        vm.canMain = true;
      } else {
        vm.canMain = false;
      }
    });
  },
  beforeRouteUpdate(to, from, next) {
    next();
  },
  computed: {
    ...mapState({
      TimeLine_active: "TimeLine_active",
      TimeLineArr: "TimeLineArr"
    }),
    userName() {
      return window.sessionStorage.getItem("username");
    },
    userType() {
      return window.sessionStorage.getItem("user_type");
    },
    showAdd() {
      this.user_type = window.sessionStorage.getItem("user_type");
      if (this.user_type > 1) {
        return true;
      }
    },
    isMatchShowAdd() {
      if (this.isMatch) {
        if (this.user_type > 1) {
          return "isMatch60px";
        } else {
          return "isMatch30px";
        }
      }
    },
    //新增用户管理菜单
    isUserShowAdd() {
      if (this.isUser) {
        if (this.user_type > 1) {
          //权限控制
          return "isUser90px";
        } else {
          return "isMatch30px";
        }
      }
    },
    //新增权限管理菜单
    isPowerShowAdd() {
      if (this.isPower) {
        return "isUser120px";
      }
    },
    isOrderShowAdd() {
      if (this.isOrder) {
        return "isMatch30px";
      }
    },
    isQuestShowAdd() {
      if (this.isQuest) {
        return "isMatch60px";
      }
    },
    isSignUp(){
      if (this.isSign) {
        return "isMatch60px";
      }
    },
    isClubShowUp(){
      if (this.isClubShow) {
              return "isMatch60px";
            }
    },
    pathCheck() {
      return true;
    },
    timeLine_point() {
      return progressIndex => {
        if (!this.TimeLine_active[progressIndex])
          return `step0-color iconfont icon-dotcircled`;
        return `step${progressIndex + 1}-color iconfont icon-dotcircled`;
      };
    },
    timeLine_line() {
      return progressIndex => {
        if (!this.TimeLine_active[progressIndex])
          return `step0-color iconfont icon-line`;
        return `step${progressIndex + 1}-color iconfont icon-line`;
      };
    },
    match_id() {
      return this.$route.query.MatchId;
    }
  },
  mounted() {
    this.username = window.sessionStorage.getItem("username");
    this.getTimeLine();
    if(window.sessionStorage.getItem("user_type")==2){
      this.getClubInfo()
    }
    if (!this.badge) {
      this.get_allclub();
    }
  },
  methods: {
    // 我的机构---修改机构信息
    changeClubInfo(row){
      
      this.$router.push({ path: '/index/User/organizationInfo'})
    },
    //请求机构信息
      getClubInfo() {
      this.$axios.post('/UserManage/user_list', {
          search: "",
          type: 2,
          status: "",
          page: ""
        }, {
          headers: {
            token: window.sessionStorage.getItem('token')
          }
        })
        .then(res => {
          if (res.data.code == 2000 || res.data.code == 2001) {
            // this.tableData = res.data.data.list
            // console.log(this.tableData);
            const user_id = window.sessionStorage.getItem('user_id')
            this.myClub = res.data.data.list.filter((item)=>{
                    return item.user_id == user_id
                  })
            
          }
        })
        .catch(error => {
          console.log(error)
        });
    },
    handleOpen(key, keyPath) {

    },
    handleClose(key, keyPath) {

    },
    handleSelect(key, keyPath) {

    },
    openAside(role) {
      this.isActive = role;
      this.isFold = false;
      this.fold();
    },
    fold() {
      if (this.isFold) {
        var body = document.getElementsByClassName("body")[0];
        body.style.width = "calc(100% - 32px)";
      } else {
        var body = document.getElementsByClassName("body")[0];
        body.style.width = "calc(100% - 120px)";
      }
      this.isFold = !this.isFold;
    },
    showMatch() {
      this.isMatch = !this.isMatch;
    },
    showUserManagement() {
      this.isUser = !this.isUser;
    },
    get_allclub() {
      this.$axios
        .post(
          "/UserManage/user_list",
          {
            search: "",
            type: 1,
            status: "",
            page: ""
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        )
        .then(res => {
          if (res.data.code == 2000) {
            this.badge = res.data.data.no_pass;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // showQuestManagement() {
    //   this.isQuest = !this.isQuest;
    // },
    showPowerManagement() {
      this.isPower = !this.isPower;
    },
    showOrderManagement() {
      this.isOrder = !this.isOrder;
    },
    toMatchList() {
      this.$router.push("/Index/Match/");
    },
    toAddMatch() {
      this.$router.push("/Index/Match/AddNewMatch");
    },
    toUmpireList() {
      this.$router.push("/Index/User/umpireList");
    },
    playerList() {
      this.$router.push("/Index/User/playerList");
    },
    toOrganizationList() {
      this.$router.push("/Index/User/organizationList");
    },
    toPower() {
      this.$router.push("/Index/power/powerManage");
    },
    toKeyWord() {
      this.$router.push("/Index/power/keyword");
    },
		toLogList(){
			this.$router.push("/Index/power/logList");
		},
		toMatchLog(){
			this.$router.push("/Index/power/matchLog");
		},
    toOrder() {
      this.$router.push("/Index/orderMange");
    },
    toKnowledge() {
      this.$router.push("/Index/questionMange/knowledge_spot");
    },
    toTest() {
      this.$router.push("/Index/questionMange/test_questions");
    },
    //跳转团体报名页面
    toGroupRegist(){
      this.$router.push("/Index/groupRegistration");
    },
    // toGroup(){
    //   this.$router.push("/Index/group");
    // },
    getTimeLine() {
      if (!this.$route.query.MatchId) {
        this.showTimeLine = false;
        return;
      }
      this.$store
        .dispatch("getTimeLine", this.$route.query.MatchId)
        .then(() => {
          this.showTimeLine = true;
        });
    },
    handleCommand(command) {
      if (command.progressIndex === 0) {
        //赛事信息
        let add_matchDetail_step = 0;
        if (command.stepIndex === 0) add_matchDetail_step = 0; //补全
        if (command.stepIndex === 2) add_matchDetail_step = 1; //编辑
        window.sessionStorage.setItem(
          "AddMatchDetailUploadType",
          add_matchDetail_step
        );
      }
      if (command.progressIndex === 2 && command.stepIndex === 0) {
        this.layout_Check();
        return;
      } //进入抽签判断
      this.$router.push({
        path: command.step.path,
        query: {
          MatchId: this.$route.query.MatchId
        }
      });
    },
    setTimeLineRouter(arr) {
      if (arr[0]) {
        arr[0][0].path = "/Index/Match/AddMatchDetail"; //补全赛事
        arr[0][1].path = "/index/match/MatchDetail"; //查看赛事
        arr[0][2].path = "/Index/Match/AddMatchDetail"; //编辑赛事
      }
      if (arr[1]) {
        arr[1][0].path = "/Index/Match/MatchSignUp"; //签到页面
      }
      if (arr[2]) {
        // arr[2][0].path = '/index/match/Layout'           //抽签准备
        arr[2][0].path = "/index/match/LayoutDraw"; //分项抽签
        arr[2][1].path = "/index/match/LayoutResult"; //签表查看
      }
      if (arr[3]) {
        arr[3][0].path = "/index/match/Layout"; //抽签准备
        arr[3][1].path = "/index/match/schedule"; //一键排战
        arr[3][2].path = "/index/match/checkSchedule"; //查看战表
      }
      if (arr[4]) {
        arr[4][0].path = "/index/match/checkSchedule"; //成绩录入
        arr[4][1].path = "/index/match/LayoutResult"; //查看签表
        arr[4][2].path = "/Index/Match/scoreList"; //成绩
        arr[4][3].path = "/Index/Match/refereeEvaluation"; //裁判评估
      }
      return arr;
    },
    layout_Check() {
      this.$axios
        .post(
          "/event/isvalidate",
          {
            com_id: this.$route.query.MatchId
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        )
        .then(res => {
          if (res.data.code == 200) {
            this.$router.push({
              path: "/index/match/LayoutDraw",
              query: {
                MatchId: this.$route.query.MatchId
              }
            });
            // this.$router.push({path: '/index/match/Layout',query:{MatchId: this.$route.query.MatchId}})
          } else {
            if (res.data.code == 201) {
              this.$message({
                type: "warning",
                message: "暂无人签到"
              });
            } else {
              this.$message({
                type: "warning",
                message: "非法访问"
              });
            }
          }
        });
    },
    doLogout() {
      this.$axios
        .post(
          "/member/doLogout",
          {
            phone: sessionStorage.getItem("phone")
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        )
        .then(res => {
          if (res.data.status == 200) {
            this.$message({
              message: res.data.message,
              type: "success"
            });
            window.sessionStorage.clear();
            this.$router.push({
              path: "../pages/login/index"
            });
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
    checkedPassword() {
      let flag = true;
      if (
        this.newPassword.trim() != this.confirmPassword.trim() ||
        this.newPassword.trim().length < 6 ||
        this.confirmPassword.trim().length < 6
      ) {
        this.$message({
          message: "新密码与二次输入的密码不一致或为空",
          type: "error"
        });
        return false;
      }
      return flag;
    },
    modifyPassword() {
      if (this.checkedPassword()) {
        this.$axios
          .post(
            "/Member/edit_password",
            {
              id: sessionStorage.getItem("user_id"),
              phone: sessionStorage.getItem("phone"),
              oldpassword: this.primaryPassword,
              newpassword: this.newPassword
              // confirmPassword: this.confirmPassword
            },
            {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            if (res.data.code == 200) {
              this.centerDialogVisible = false;
              this.$message({
                message: res.data.message,
                type: "success"
              });
              window.sessionStorage.clear();
              this.$router.push({
                path: "../pages/login/index"
              });
            } else {
              this.$message({
                message: res.data.message,
                type: "error"
              });
            }
          });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.badgeItem .el-button {
  padding: 6px;
  background: transparent;
  border: none;
  color: #fff;
}

//
.isActive {
  color: rgb(64, 158, 255);
}

.isUser90px {
  height: 90px !important;
}
.isUser120px {
  height: 120px !important;
}
.isMatch60px {
  height: 60px !important;
}

.isMatch30px {
  height: 30px !important;
}

.icon-right::before {
  display: inline-block;
  transition: all 0.3s;
}

.rotate:before {
  transform: rotate(90deg);
}

.step0-color {
  transition: 3s;
  color: #7b7b7b;
}

.step1-color {
  color: #f54221;
}

.step2-color {
  color: #ff8200;
}

.step3-color {
  color: #ffbd00;
}

.step4-color {
  color: #579c00;
}

.step5-color {
  color: #128aa1;
}

//
//
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .aside_show {
    transition: width 0.2s;
    font-size: 16px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 120px;
    background-color: rgb(48, 65, 86);
    color: #fff;

    .nav {
      li {
        padding: 6px 0;
        width: 120px;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s, color 0.3s;

        .iconfont {
          margin-right: 5px;
          margin-left: 5px;
          font-size: 18px;
        }

        .iconfont::before {
          vertical-align: middle;
        }

        .title {
          font-size: 14px;
          line-height: 40px;
          padding: 10px 0;
        }

        .title:hover {
          color: rgb(64, 158, 255);
        }

        .noMatch {
          font-size: 14px;
          width: 100%;

          li {
            height: 20px;
            line-height: 20px;
          }

          li:hover {
            background-color: #607488;
            color: rgb(64, 158, 255);
          }
        }
      }

      // li:hover{
      //     background-color:#607488;
      //     color:rgb(64, 158, 255);
      // }
    }
  }

  .aside_hide {
    transition: width 0.2s;
    font-size: 16px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 32px;
    background-color: rgb(48, 65, 86);
    color: #fff;

    .nav {
      li {
        height: 56px;
        line-height: 56px;
        cursor: pointer;
        text-align: center;
        transition: border-color 0.3s, background-color 0.3s, color 0.3s;

        .iconfont {
          margin-right: 5px;
          font-size: 18px;
        }
      }

      li:hover {
        background-color: #607488;
        color: rgb(64, 158, 255);
      }
    }
  }

  .body {
    transition: width 0.2s;
    float: right;
    // width: calc(100vw - 120px);
    width: calc(100vw - 32px);
    height: 100%;
    background-color: #fff;

    header {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #eaeaea;
      line-height: 40px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;

      .left {
        .iconfont {
          font-size: 26px;
          margin-left: 10px;
          cursor: pointer;
        }

        .title {
          margin-left: 10px;
          display: inline-block;
          vertical-align: top;

          .operation_instructions {
            color: #409eff;
            font-size: 14px;
            padding-left: 10px;
            text-decoration: none;
          }
        }
      }

      .right {
        padding-right: 20px;
        font-size: 14px;
        line-height: 40px;

        .iconfont {
          font-size: 18px;
        }

        .liner {
          margin: 0 4px;
          font-size: 14px;
        }

        .identify {
          font-size: 14px;
        }
      }
    }

    .guide {
      height: 60px;
      width: 100%;
      border-bottom: 1px solid #eaeaea;
      line-height: 30px;
      padding-left: 50px;
      box-sizing: border-box;
      color: #727272;
      display: flex;
      /*.el-dropdown-link:hover{*/
      /*transition: 0.5s;*/
      /*color: #62AFFF;*/
      /*}*/
    }

    .main {
      width: 100%;
      height: calc(100% - 100px);
      // height: 100%;
    }

    .setMain {
      width: 100%;
      height: 100%;
    }
  }
}

.slide-in-enter-active {
  transition: all 1.5s ease;
  /*transition: all 0.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
}

.slide-in-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-in-enter {
  transform: translateX(10%);
  opacity: 0;
}

.slide-in-leave-to

  /* .slide-fade-leave-active for below version 2.1.8 */
 {
  transform: translateX(50%);
  opacity: 0;
}

.outlogin:hover {
  color: #409eff;
}
</style>
